<template>
  <div class="admin-home">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <h2>欢迎使用医院管理系统</h2>
        </div>
      </template>
      <div class="card-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-statistic title="患者总数" :value="patientCount" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="医生总数" :value="doctorCount" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="今日预约" :value="appointmentCount" />
          </el-col>
        </el-row>
        
        <el-divider />
        
        <h3>快速导航</h3>
        <el-row :gutter="20" class="quick-nav">
          <el-col :span="8">
            <el-card shadow="hover" @click="navigate('/admin/patients')">
              <el-icon><UserFilled /></el-icon>
              <span>患者管理</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" @click="navigate('/admin/doctors')">
              <el-icon><User /></el-icon>
              <span>医生管理</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" @click="navigate('/admin/schedule')">
              <el-icon><Calendar /></el-icon>
              <span>排班管理</span>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUsersStore } from '../../stores/users'
import { 
  UserFilled, 
  User, 
  Calendar 
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUsersStore()

// Mock data for demonstration
const patientCount = ref(120)
const doctorCount = ref(25)
const appointmentCount = ref(45)

onMounted(async () => {
  try {
    // In a real application, you would fetch actual statistics
    // const stats = await userStore.getUserStats()
    // patientCount.value = stats.patientCount
    // doctorCount.value = stats.doctorCount
    // appointmentCount.value = stats.appointmentCount
  } catch (error) {
    console.error('Failed to load statistics:', error)
  }
})

function navigate(path) {
  router.push(path)
}
</script>

<style scoped>
.admin-home {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 20px 0;
}

.quick-nav {
  margin-top: 20px;
}

.quick-nav .el-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-nav .el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.quick-nav .el-icon {
  font-size: 30px;
  margin-bottom: 10px;
}
</style> 